<template>
  <div class="chat-container">
    <div class="flex" v-if="returnPath === ''" :style="{ height: screenHeight + 'px', overflow: 'hidden auto' }">
      <div class="navMarginTop allBackground flex">
        <a-tabs @change="callback" class="flex-1">
          <a-tab-pane v-for="(item, index) in listData" :tab="item.title" :key="index">
            <div class="creative-item" v-if="item.data.length !== 0">
              <div class="creative-item-box" v-for="(ite, ind) in item.data" :key="ind" @click="gotoChat(ite)">
                <div class="creative-item-cont">
                  <div class="imgCont">
                    <img :src="ite.img" alt="" />
                    <!-- <i class="iconfont icon-arrow"></i> -->
                    <h6>{{ ite.title }}</h6>
                  </div>
                  <div class="p">{{ ite.content }}</div>
                  <i
                    :class="['iconfont', !ite.ifIconShow ? 'icon-31shoucang' : 'icon-shoucang active']"
                    @click.stop="addCollect(ite)"
                  ></i>
                  <!-- <span>{{}}</span> -->
                </div>
              </div>
            </div>
            <div class="creative-item-false" v-if="item.data.length === 0"><img class="session-logo" src="@assets/chat/empty.png" alt="" />暂无数据~</div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <!-- <global-footer /> -->
    </div>

    <work-plan
      @returnChan="returnChan"
      @changeCot="changeCot"
      :returnNav="returnNav"
      :returnPath="returnPath"
      v-if="returnPath !== ''"
    ></work-plan>
  </div>
</template>
  
<script>
import WorkPlan from '../application/WorkPlan' //工作计划
import GlobalFooter from '@/components/page/GlobalFooter'
import { getAction } from '@/api/manage'
export default {
  name: 'AuthoringTool',
  mixins: [],
  components: { WorkPlan, GlobalFooter },
  data() {
    return {
      returnNav: '',
      returnPath: '',
      routePath: '',
      listData: [
        {
          title: '全部',
          data: [],
        },
        {
          title: '收藏',
          data: [],
        },
        {
          title: '电商运营',
          data: [
            {
              img: require('@assets/chat/wenan.png'),
              title: '电商商品详情文案',
              path: 'CommerceProducts',
              content: '生成有吸引力和个性化的商品描述，吸引用户的注意力。',
              PlanNum: '11',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/taocan.png'),
              title: '团购套餐介绍',
              path: 'GroupBuying',
              content: '帮助团购平台提升套餐的销售量和用户体验。',
              PlanNum: '12',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/liwu.png'),
              title: '商品标题生成',
              path: 'ProductTitle',
              content: '提高商品在搜索结果中的展示效果，增加点击率和转化率。',
              PlanNum: '13',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/pinglun.png'),
              title: '商品好评',
              path: 'ProductPositive',
              content: '更准确地了解用户对商品的评价和反馈，以便做出相应的改进和调整。',
              PlanNum: '14',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/duiihua.png'),
              title: '虚拟购买评论',
              path: 'VirtualPurchase',
              content: '吸引用户或增加商品的销量。',
              PlanNum: '15',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/zhuanha.png'),
              title: '差评转化',
              path: 'NegativeReview',
              content: '将商品的差评转变为正面评价的过程。',
              PlanNum: '16',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/pinglun.png'),
              title: '大众点评/美团探店点评',
              path: 'StoreReviews',
              content: '为用户提供更精准、个性化的点评内容和推荐服务。',
              PlanNum: '17',
              ifIconShow: false,
            },
          ],
        },
        {
          title: '职场必备',
          data: [
            {
              img: require('@assets/chat/gongzuojihua.png'),
              title: '工作计划',
              path: 'WorkPlan',
              content: '帮助用户规划和管理工作，提供个性化的工作计划和时间安排建议。',
              PlanNum: '1',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/zongjiebao.png'),
              title: '总结报告',
              path: 'WorkPlanReprt',
              content: '大幅提高数据处理和信息总结的效率和准确性。',
              PlanNum: '2',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/zhou.png'),
              title: '日报&周报',
              path: 'DailyWeekly',
              content: '帮助用户追踪和评估工作进展，提供数据和指标支持。',
              PlanNum: '3',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/hetongqianding.png'),
              title: '生成合同',
              path: 'ConTract',
              content: '提供合同模板、自动填充、法律解析、格式调整和合同审查等功能。',
              PlanNum: '4',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/youjian.png'),
              title: '电子邮件生成器',
              path: 'EmailGenerator',
              content: '自动化、个性化、时间节省和效率提高的功能。',
              PlanNum: '6',
              ifIconShow: false,
            },
            // {
            //   img: require('@assets/chat/zhongyinfanyi.png'),
            //   title: '翻译',
            //   path: 'TransLate',
            //   content: '将一种语言的文本或口语表达转化为另一种语言的过程，实现自动化、高质量的翻译服务。',
            // },
          ],
        },
        {
          title: '文学',
          data: [
            {
              img: require('@assets/chat/zitibiaoti.png'),
              title: '学生作文',
              path: 'StudentComposition',
              content: '辅助学生进行作文写作，提供创意思路、语言表达和文笔优化等方面的支持和建议。',
              PlanNum: '21',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/xueshu.png'),
              title: '学术文章',
              path: 'AcademicArticles',
              content: '提供学术写作方面的指导和帮助，包括论文结构、文献引用、专业术语等。',
              PlanNum: '22',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/linggan.png'),
              title: '创意故事',
              path: 'CreativeStory',
              content: '帮助用户创作具有创意的故事，提供情节设定、人物塑造和悬念构建等方面的支持。',
              PlanNum: '23',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/citie.png'),
              title: '人物塑造',
              path: 'CharacTerization',
              content: '提供人物塑造方面的建议和创意，包括人物特征、心理描写、角色关系等。',
              PlanNum: '24',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/zitibiaoti.png'),
              title: '赛博朋克鬼故事',
              path: 'GhostStory',
              content: '为赛博朋克鬼故事的创作提供想法和故事元素，帮助构建引人入胜的鬼故事。',
              PlanNum: '25',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/duilian.png'),
              title: '对联',
              path: 'AntitheticalCouplet',
              content: '生成对联的创作，包括工整的对仗关系和符合语言规律的词句搭配。',
              PlanNum: '26',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/sanwen.png'),
              title: '散文',
              path: 'ProseSe',
              content: '辅助生成散文，提供思路、表达技巧和情感描写等方面的建议。',
              PlanNum: '27',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/gechi.png'),
              title: '现代诗',
              path: 'ModernPoetry',
              content: '创作现代诗歌，提供韵律、词语选择和意象构建等方面的创作灵感和支持。',
              PlanNum: '28',
              ifIconShow: false,
            },
          ],
        },
        {
          title: '网站',
          data: [
            {
              img: require('@assets/chat/sousuo.png'),
              title: '网站首页SEO优化',
              path: 'SeoOptimization',
              content: '优化网站首页，以提高其在搜索引擎结果页面中的排名和曝光度。',
              PlanNum: '31',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/biaoti.png'),
              title: '网页大标题',
              path: 'WebPage',
              content: '使用自然语言处理和文本生成技术来自动生成吸引人的网页大标题，以提高用户点击率和页面识别度。',
              PlanNum: '32',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/qiye.png'),
              title: '公司背景',
              path: 'CompanyBackground',
              content: '分析和整理公司相关的信息和数据，生成公司背景介绍的文本内容。',
              PlanNum: '33',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/hyaoz.png'),
              title: '产品核心价值',
              path: 'CoreValues',
              content: '提取和总结产品的核心价值，并生成相应的文案或描述。',
              PlanNum: '34',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/hyaod.png'),
              title: '产品核心要点',
              path: 'CorePoints',
              content: '生成产品核心要点的文案，以便更好地推广和宣传产品。',
              PlanNum: '35',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/qiming.png'),
              title: '公司或产品起名',
              path: 'OrProduct',
              content: '提供相关的语义分析和创作建议，以生成公司或产品起名的候选列表和创意。',
              PlanNum: '36',
              ifIconShow: false,
            },
          ],
        },
        {
          title: '营销广告',
          data: [
            {
              img: require('@assets/chat/zongjiebao.png'),
              title: '营销文案-引导下单',
              path: 'MarketingCopy',
              content: '撰写和心理引导技巧，激发用户的购买欲望，促使他们完成购买动作。',
              PlanNum: '41',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/miaoshu.png'),
              title: '广告描述',
              path: 'AdvertisingDescription',
              content: '描述产品的特点、功能和优势，从而吸引用户的注意和兴趣。',
              PlanNum: '42',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/biaoyu.png'),
              title: '广告标语',
              path: 'AdvertisingSlogan',
              content: '生成吸引人的广告标语，以提高广告的记忆性和效果，让广告更容易引起用户的共鸣并传递核心信息。',
              PlanNum: '43',
              ifIconShow: false,
            },
          ],
        },
        {
          title: '教育(论文)',
          data: [
            {
              img: require('@assets/chat/biaoti.png'),
              title: '文章主题及大纲',
              path: 'ArticleOutline',
              content: '分析文本的语义和结构，为撰写文章提供指导和框架。',
              PlanNum: '51',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/xueke.png'),
              title: '学科出题',
              path: 'SubjectQuestions',
              content: '它能够根据特定的学科知识结构，生成适宜的题目类型和难度。',
              PlanNum: '52',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/kaoyan.png'),
              title: '考研题目',
              path: 'PostgraduateQuestions',
              content: '根据不同的学科和考试科目，生成针对考研的试题和模拟题。',
              PlanNum: '53',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/gongzuojihua.png'),
              title: '学习计划',
              path: 'StudyPlan',
              content: '根据学科内容的难易程度、时间分配和自定义的学习目标等因素，帮助制定学习计划。',
              PlanNum: '54',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/lunwen.png'),
              title: '论文大纲',
              path: 'PaperOutline',
              content: '根据论文的类型、研究内容和结构要求，生成合理的论文大纲。',
              PlanNum: '55',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/zhaiyao.png'),
              title: '论文摘要',
              path: 'PaperAbstract',
              content: '识别和总结论文的主要观点、方法、结果和贡献等，并根据摘要的长度和写作风格进行生成。',
              PlanNum: '56',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/biaoti.png'),
              title: '论文标题',
              path: 'PaperTitle',
              content: '分析论文的研究领域、贡献和方法等，以生成与论文内容相关的标题。',
              PlanNum: '57',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/biaoyu.png'),
              title: '雅思大作文',
              path: 'IeltsComposition',
              content: '生成合适的大作文题目、提供范文和写作建议，帮助考生准备雅思写作考试。',
              PlanNum: '58',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/linggan.png'),
              title: '学生会活动策划',
              path: 'EventPlanning',
              content: '分析活动的目的、受众、预算和资源等因素，生成适宜的活动策划和执行计划。',
              PlanNum: '59',
              ifIconShow: false,
            },
          ],
        },
        {
          title: '媒体写作',
          data: [
            // {
            //   img: require('@assets/chat/update.png'),
            //   title: '自定义输入',
            //   path: 'CustomInput',
            //   content: '允许用户自主输入自定义的内容或指令。',
            // },
            // {
            //   img: require('@assets/chat/huihua.png'),
            //   title: 'AI绘画描述词',
            //   path: 'PaintingWords',
            //   content: '能够以准确的词语描述绘画作品。',
            // },
            {
              img: require('@assets/chat/biaoti.png'),
              PlanNum: '11',
              ifIconShow: false,
              title: '新媒体全文写作',
              path: 'NewMedia',
              content: '辅助或自动完成新媒体文本的撰写过程。',
              PlanNum: '71',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/kuozhan.png'),
              title: '发言稿',
              path: 'SpeechManuscript',
              content: '辅助或自动完成新媒体文本的撰写过程。',
              PlanNum: '72',
              ifIconShow: false,
            },
            // {
            //   img: require('@assets/chat/kuozhan.png'),
            //   title: '全文写作(步骤式)',
            //   path: 'TextWriting',
            //   content: '辅助用户编写具有步骤性的全文写作，例如烹饪食谱、DIY教程。',
            // },
            // {
            //   img: require('@assets/chat/shex.png'),
            //   title: '短视频带货文案',
            //   path: 'VideoDeliveryCopy',
            //   content: '生成适用于短视频带货的文案，包括产品介绍、特点突出等以吸引购买用户。',
            // },
            // {
            //   img: require('@assets/chat/wenzhan.png'),
            //   title: '小红书笔记标题',
            //   path: '',
            //   content: '提供与小红书笔记相匹配的标题，吸引用户点击阅读。',
            // },
            // {
            //   img: require('@assets/chat/biaoti.png'),
            //   title: '新媒体文章标题',
            //   path: '',
            //   content: '帮助生成各类新媒体文章的标题，吸引读者的注意力。',
            // },
            // {
            //   img: require('@assets/chat/xiaohong.png'),
            //   title: '小红书种草文案',
            //   path: '',
            //   content: '辅助生成适用于小红书的种草文案，包括产品介绍、体验分享等。',
            // },
            // {
            //   img: require('@assets/chat/xiaohong.png'),
            //   title: '小红书旅游攻略',
            //   path: '',
            //   content: '辅助生成旅游攻略文章，提供景点介绍、交通指南、行程安排等信息。',
            // },
            {
              img: require('@assets/chat/update.png'),
              title: '文章开头段',
              path: 'ArticleStart',
              content: '提供文章开头段的创作灵感和优化建议，吸引读者继续阅读。',
              PlanNum: '73',
              ifIconShow: false,
            },
            // {
            //   img: require('@assets/chat/biaoti.png'),
            //   title: '文章SEO优化',
            //   path: '',
            //   content: '分析关键字和搜索引擎优化技巧，帮助优化文章的结构和内容，提高搜索引擎排名和曝光度。',
            // },

            {
              img: require('@assets/chat/update.png'),
              title: '文章章节内容',
              path: 'ArticleChapter',
              content: '根据指定的主题或要求，生成与之相关的章节内容，提供文章写作的灵感或创作支持。',
              PlanNum: '74',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/canguan.png'),
              title: '餐馆探店文案',
              path: 'ExploringStores',
              content: '生成适用于餐馆探店的文案，包括餐厅介绍、菜品推荐、用餐体验等。',
              PlanNum: '75',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/fenjing.png'),
              title: '景点打卡文案',
              path: 'ClockIn',
              content: '辅助生成针对景点打卡的文案，包括景点介绍、拍照指导等。',
              PlanNum: '76',
              ifIconShow: false,
            },
          ],
        },
        {
          title: '短视频',
          data: [
            {
              img: require('@assets/chat/shex.png'),
              title: '短视频带货文案',
              path: 'DeliveryCopy',
              content: '帮助商家和品牌快速生成大量适合短视频带货的文案。',
              PlanNum: '61',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/zitibiaoti.png'),
              title: '抖音带货标题',
              path: 'ShippingTitle',
              content: '生成适用于抖音带货的吸引人的标题，吸引用户驻足观看。',
              PlanNum: '62',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/koubo.png'),
              title: '带货视频口播稿',
              path: 'OralDraft',
              content: '提供适用于带货视频的口播稿，包括产品介绍和推销词。',
              PlanNum: '63',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/linggan.png'),
              title: '视频灵感',
              path: 'VideoInspiration',
              content: '根据用户需求提供视频创作的灵感和创意，如剧情、故事线、特效等方面的建议。',
              PlanNum: '64',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/citie.png'),
              title: '视频吸睛开头',
              path: 'VideoStart',
              content: '提供吸引人的视频开头方式、剪辑技巧等，以引起观众的兴趣。',
              PlanNum: '65',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/zitibiaoti.png'),
              title: '视频标题',
              path: 'VideoTitle',
              content: '生成吸引点击的视频标题，提高视频的曝光和观看量。',
              PlanNum: '66',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/jiaoben.png'),
              title: '短视频脚本大纲',
              path: 'VideoOutline',
              content: '辅助生成短视频的剧本大纲，提供场景设定和情节安排等。',
              PlanNum: '67',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/jieshao.png'),
              title: '视频介绍',
              path: 'VideoIntroduce',
              content: '提供视频介绍文案的写作建议，包括视频内容、主题、表现方式等。',
              PlanNum: '68',
              ifIconShow: false,
            },
            {
              img: require('@assets/chat/linggan.png'),
              title: '短视频分镜灵感',
              path: 'StoryboardInspiration',
              content: '根据用户需求提供短视频分镜的创意和灵感，指导拍摄和剪辑。',
              PlanNum: '69',
              ifIconShow: false,
            },
          ],
        },
      ],
      collectionListData: [],
      screenWidth: '',
      screenHeight: '',
    }
  },

  watch: {},

  mounted() {
    var array = []
    this.listData.forEach(function (item) {
      array = [...array, ...item.data]
    })
    this.listData[0].data = array
    let path = this.$route.fullPath
    // console.log('path', path)
    let paths = path.split('/')
    let routePath = paths[paths.length - 1]
    this.routePath = routePath
    console.log('routePath', routePath)
    if (routePath.includes('?')) {
      // 获取参数
      try{
        var param = this.$route.query.param
        this.returnNav = param.title
        this.returnPath = param.path
      }catch{

      }

    } else {
      if (routePath !== 'AuthoringTool') {
        this.listData = this.listData.slice(2, this.listData.length)
      }
    }
    this.$nextTick(function () {
      this.screenWidth = window.innerWidth
      this.screenHeight = window.innerHeight
      this.apiCollectionList()
    })
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    // 相同数据整合
    handlerDatas(arr) {
      var vol = this.listData[0].data
      this.listData[1].data = []
      vol.forEach((item, index) => {
        item.ifIconShow = false
        this.collectionListData.forEach((num, idx) => {
          if (item.PlanNum === num.menuId) {
            item.ifIconShow = true
            this.listData[1].data.push(item)
          }
        })
      })
    },
    apiCollectionList() {
      getAction('/collection/api/list')
        .then((res) => {
          this.collectionListData = res.result
          this.handlerDatas(this.collectionListData)
        })
        .catch((error) => {
          console.log('error', error)
        })
    },
    addCollect(item) {
      let obj = {
        typeId: item.PlanNum,
      }
      getAction('/collection/api/coll', obj)
        .then((res) => {
          if (res.result === '收藏成功') {
            this.$message.success(res.message)
          } else if (res.result === '取消收藏') {
            this.$message.info(res.message)
          } else {
            this.$message.info(res.message)
          }
          this.apiCollectionList()
        })
        .catch((error) => {
          console.log('error', error)
        })
    },
    changeCot(item) {
      console.log('item', item)
      this.returnNav = item.title
      this.returnPath = item.path
    },
    returnChan() {
      this.returnPath = ''
    },
    // 选择统计图类别
    callback(key) {
      console.log('key', key)
      this.returnChan()
    },
    gotoChat(item) {
      console.log('item', item)
      if (item.path === '') {
        this.$message.error('开发中')
        return
      } else {
        if (this.routePath !== 'AuthoringTool') {
          var params = {
            title: item.title,
            path: item.path,
          }
          this.$router.push({
            path: '/chatgpt/component/AuthoringTool',
            query: { param: params },
          })
        }
        this.$nextTick(function () {
          this.returnNav = item.title
          this.returnPath = item.path
        })
      }
    },
  },
}
</script>
  
  <style lang="less" scoped >
.creative-item {
  width: 100%;
}
.creative-item-false{
  display: flex;
    align-items: center;
    flex-direction: column;
    color: #909399;
  img{
    width: 35%;
  }
}
.creative-item-box {
  float: left;
  width: 16.666667%;
  // margin: 0px 0.46667vw 1vw;
  padding: 10px;
  .creative-item-cont {
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: rgb(235 238 253) 0px 3px 10px;
    border-radius: 0.73333vw;
    padding: 1vw;
    // margin: 1vw 0.46667vw 0px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    .imgCont {
      display: flex;
      align-items: center;
      // justify-content: space-around;
      img {
        width: 50px;
        height: 50px;
        padding: 5px;
        // background: #d6d6d6;
        // border-radius: 50%;
        // transform: scale(-1, 1);
        -webkit-box-reflect: below -16px -webkit-linear-gradient(transparent, transparent 50%, rgba(0, 0, 0, 0.8));
        margin-right: 6px;
      }
    }
    h6 {
      color: #101010;
      font-size: 15px;
      margin: 0px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: off*/
      -webkit-box-orient: vertical;
      /* autoprefixer: on*/
    }
    .p {
      color: #999;
      font-size: 12px;
      overflow: hidden;
      height: 36px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: off*/
      -webkit-box-orient: vertical;
      /* autoprefixer: on*/
    }
    i {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 21px;
      opacity: 0;
      transition: all 0.3s;
        &.active{
          color: orange;
        }
    }
    &:hover {
      transform: scale(1.05);
      box-shadow: 0px 2px 6px 0px #e7e7e7;
      i {
        // color: orange;
        opacity: 1;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .creative-item-box {
    margin: 1% 1% 1%;
    width: 48%;
    padding: 2px;
    .creative-item-cont {
      .imgCont {
        img {
          width: 50px;
          height: 50px;
        }
        i {
          font-size: 20px;
        }
      }
      h6 {
        font-size: 14px;
        margin-top: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: unset;
      }
    }
  }
  .chat-container {
    .flex {
      width: 100%;
    }
  }
}
</style>
  